        <script src="__JS__/responsiveslides.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/plyr.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/scrollReveal.js" type="text/javascript" charset="utf-8"></script>
       	<link rel="stylesheet" type="text/css" href="__CSS__/plyr.css"/>
       	<link rel="stylesheet" href="__CSS__/common.css" />
       	<link rel="stylesheet" type="text/css" href="__CSS__/product.css"/>

		<div id="top" class="callbacks_container">
	        <div>
				<!--<img style="width: 100%;" src="__IMG__/product.jpg" alt="" />-->
				<img style="width: 100%;" src="{$ad['ad_image_url']}" alt="" />
	        </div>
	    </div>
	    
        <div class="section">
			<div class="container">
				<div class="bg1" style="background-image: url('{$config.PROD_IMG_C1}')">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG1']}" alt="doctor" title="doctor" class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG2']}" alt="doctor" title="doctor" class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		<div class="section">
			<div class="container">
				<div class="bg2" style="background-image: url('{$config.PROD_IMG_C2}')">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG3']}" alt="doctor" title="doctor" class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG4']}" alt="doctor" title="doctor" class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		<div class="section">
			<div class="container">
				<div class="bg3" style="background-image: url('{$config.PROD_IMG_C3}')">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG5']}" alt="doctor" title="doctor"  class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="{$config['PROD_IMG6']}" alt="doctor" title="doctor"  class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		
		<div class="result" id="outdiv">
		    <div class="indiv">
		        <img class="imgresult" id="bigimg" src="">
		    </div>  
		</div> 
		
		<div class="clearfix"></div>
			
        <div style="margin-top: 10px;">
	        	<div class="container" id="video_mode">
	        		<div class="video" data-scroll-reveal="enter top over 1s and move 200px after 0s" data-scroll-reveal-id="1" style="-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true">
	                <div tabindex="0" class="plyr plyr--video plyr--fullscreen-enabled plyr--stopped plyr--ready">
					<div class="plyr__video-wrapper" style="cursor: pointer;">
						<div class="plyr__captions"></div>
						<video src="{$config['PRODUCT_VIDEO']}" class="embed-responsive-item plyr--setup" poster="{$config['PRODUCT_VIDEO_IMG']}">
							<source src="{$config['PRODUCT_VIDEO']}" type="video/mp4">
							<!-- <source src="/path/to/video.webm" type="video/webm">-->
							<!-- Captions are optional -->
						</video>
					</div>
					<!--<button type="button" data-plyr="play" class="plyr__play-large" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>-->
					<!--<div class="plyr__controls"><button type="button" data-plyr="play" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button><button type="button" data-plyr="pause"><svg><use xlink:href="#plyr-pause"></use></svg><span class="plyr__sr-only">Pause</span></button><span class="plyr__progress"><label for="seek6523" class="plyr__sr-only">Seek</label><input id="seek6523" class="plyr__progress&#45;&#45;seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek"><progress class="plyr__progress&#45;&#45;played" max="100" value="0" role="presentation"></progress><progress class="plyr__progress&#45;&#45;buffer" max="100" value="7.05"><span>7.05</span>% buffered</progress><span class="plyr__tooltip">00:00</span></span><span class="plyr__time"><span class="plyr__sr-only">Current time</span><span class="plyr__time&#45;&#45;current">00:39</span></span><button type="button" data-plyr="mute" aria-pressed="false"><svg class="icon&#45;&#45;muted"><use xlink:href="#plyr-muted"></use></svg><svg><use xlink:href="#plyr-volume"></use></svg><span class="plyr__sr-only">Toggle Mute</span></button><span class="plyr__volume"><label for="volume6523" class="plyr__sr-only">Volume</label><input id="volume6523" class="plyr__volume&#45;&#45;input" type="range" min="0" max="10" value="10" data-plyr="volume"><progress class="plyr__volume&#45;&#45;display" max="10" value="10" role="presentation"></progress></span><button type="button" data-plyr="captions"><svg class="icon&#45;&#45;captions-on"><use xlink:href="#plyr-captions-on"></use></svg><svg><use xlink:href="#plyr-captions-off"></use></svg><span class="plyr__sr-only">Toggle Captions</span></button><button type="button" data-plyr="fullscreen" aria-pressed="false"><svg class="icon&#45;&#45;exit-fullscreen"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="plyr__sr-only">Toggle Fullscreen</span></button></div>-->
					</div>
	            </div>
	        </div>
        </div>
		

	<script>plyr.setup();</script>
    <script>
        (function () {
            window.scrollReveal = new scrollReveal({reset: true, move: '50px'});
        })();
    </script>
	<script type="text/javascript">
		function showImg(outdiv,indiv,bigimg,thiselement){
		    var winW = $(window).width();
		    var winH = $(window).height();
		    var src = $(thiselement).attr('src');
		    $(bigimg).attr("src",src);
		    $("<__IMG__/>").attr("src",src).load(function(){
		        var imgW = this.width; 
		        var imgH = this.height;
		        var scale= imgW/imgH;
		        if( imgW > winW ){
		            $(bigimg).css("width","100%").css("height","auto");
		            imgH = winW/scale;
		            var h=(winH-imgH)/2;            
		            $(indiv).css({"left":0,"top":h});
		        }else{        
		            $(bigimg).css("width",imgW+'px').css("height",imgH+'px');
		            var w=(winW-imgW)/2;
		            var h=(winH-imgH)/2;      
		            $(indiv).css({"left":w,"top":h});
		        }
		              
		        $(outdiv).fadeIn("fast");
		        $(outdiv).click(function(){
		            $(this).fadeOut("fast");
		        });                             
		    });
		}
		$('.imgclass').click(function(){
		    var thiselement=$(this);
		    showImg("#outdiv",".indiv","#bigimg",thiselement);
		});    
	</script>


	<script>
		$('#product').addClass('active');
	</script>